<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useAdminStore } from '../../store/admin'
import { ElCard, ElRow, ElCol, ElStatistic, ElProgress, ElButton } from 'element-plus'

const router = useRouter()
const adminStore = useAdminStore()

// 实习统计数据
const internshipStats = ref({
  totalStudents: 0,
  totalTeachers: 0,
  totalCompanies: 0,
  totalInternships: 0,
  activeInternships: 0,
  completedInternships: 0,
  internshipRate: 0,
  placementRate: 0,
  internshipStatusDistribution: {},
  companyIndustryDistribution: null
})

// 系统运行状态
const systemStats = ref({
  systemVersion: '',
  startTime: '',
  totalUsers: 0,
  onlineUsers: 0,
  totalRequests: 0,
  errorRequests: 0,
  cpuUsage: 0,
  memoryUsage: 0,
  diskUsage: 0
})

const loading = ref(false)

// 获取统计数据
const fetchStatistics = async () => {
  loading.value = true
  try {
    // 获取实习统计数据
    const internshipData = await adminStore.fetchStatistics()
    internshipStats.value = internshipData

    // 获取系统运行状态
    const systemData = await adminStore.getSystemStatistics()
    systemStats.value = systemData
  } catch (error) {
    console.error('获取统计数据失败:', error)
  } finally {
    loading.value = false
  }
}

// 跳转到指定页面
const navigateTo = (path) => {
  router.push(path)
}

onMounted(() => {
  fetchStatistics()
})
</script>

<template>
  <div class="admin-dashboard">
    <h1>管理员仪表板</h1>

    <!-- 左上区域：实习统计数据 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :span="12">
        <el-card>
          <el-statistic title="学生总数" :value="internshipStats.totalStudents || 0" />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <el-statistic title="教师总数" :value="internshipStats.totalTeachers || 0" />
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="stats-row">
      <el-col :span="12">
        <el-card>
          <el-statistic title="企业总数" :value="internshipStats.totalCompanies || 0" />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <el-statistic title="实习总数" :value="internshipStats.totalInternships || 0" />
        </el-card>
      </el-col>
    </el-row>

    <!-- 右上区域：实习状态统计 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :span="12">
        <el-card>
          <el-statistic title="进行中实习" :value="internshipStats.activeInternships || 0" />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <el-statistic title="已完成实习" :value="internshipStats.completedInternships || 0" />
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="stats-row">
      <el-col :span="12">
        <el-card>
          <el-statistic title="实习率" :value="internshipStats.internshipRate || 0" suffix="%" />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <el-statistic title="就业率" :value="internshipStats.placementRate || 0" suffix="%" />
        </el-card>
      </el-col>
    </el-row>

    <!-- 主内容区域 -->
    <el-row :gutter="20" class="content-row">
      <!-- 左下区域：快捷操作 -->
      <el-col :span="12">
        <el-card class="action-card">
          <template #header>
            <div class="card-header">
              <span>快捷操作</span>
            </div>
          </template>
          <div class="quick-actions">
            <el-button type="primary" @click="navigateTo('/admin/users')">
              用户管理
            </el-button>
            <el-button type="success" @click="navigateTo('/admin/companies/pending')">
              企业审核
            </el-button>
            <!-- 新增按钮 -->
            <el-button type="warning" @click="navigateTo('/admin/positions')">
              实习岗位管理
            </el-button>
            <el-button type="info" @click="navigateTo('/admin/internships')">
              实习管理
            </el-button>
            <el-button @click="navigateTo('/admin/profile')">
              个人信息
            </el-button>
          </div>
        </el-card>
      </el-col>

      <!-- 右下区域：系统信息 -->
      <el-col :span="12">
        <el-card class="system-info-card">
          <template #header>
            <div class="card-header">
              <span>系统信息</span>
            </div>
          </template>
          <div class="system-status">
            <el-row :gutter="20" class="system-stats">
              <el-col :span="12">
                <div class="statistic-item">
                  <div class="statistic-title">系统版本</div>
                  <div class="statistic-value">{{ systemStats.systemVersion || '1.0.0' }}</div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="statistic-item">
                  <div class="statistic-title">总请求数</div>
                  <div class="statistic-value">{{ systemStats.totalRequests || 0 }}</div>
                </div>
              </el-col>
            </el-row>

            <div class="progress-section">
              <div class="progress-item">
                <div class="progress-label">CPU使用率</div>
                <el-progress
                    :percentage="systemStats.cpuUsage || 0"
                    :format="() => `${systemStats.cpuUsage || 0}%`"
                    :status="systemStats.cpuUsage > 80 ? 'exception' : ''"
                />
              </div>

              <div class="progress-item">
                <div class="progress-label">内存使用率</div>
                <el-progress
                    :percentage="systemStats.memoryUsage || 0"
                    :format="() => `${systemStats.memoryUsage || 0}%`"
                    :status="systemStats.memoryUsage > 80 ? 'exception' : ''"
                />
              </div>

              <div class="progress-item">
                <div class="progress-label">磁盘使用率</div>
                <el-progress
                    :percentage="systemStats.diskUsage || 0"
                    :format="() => `${systemStats.diskUsage || 0}%`"
                    :status="systemStats.diskUsage > 90 ? 'exception' : ''"
                />
              </div>
            </div>

            <div class="additional-info">
              <p>系统运行正常</p>
              <p>启动时间: {{ systemStats.startTime ? new Date(systemStats.startTime).toLocaleString() : '未知' }}</p>
              <p>错误请求数: {{ systemStats.errorRequests || 0 }}</p>
              <p>总用户数: {{ systemStats.totalUsers || 0 }}</p>
              <p>在线用户: {{ systemStats.onlineUsers || 0 }}</p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.admin-dashboard {
  padding: 20px;
}

.stats-row {
  margin-bottom: 20px;
}

.content-row {
  margin-top: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.quick-actions .el-button {
  margin: 5px;
}

.system-status p {
  margin: 8px 0;
}

.statistic-item {
  text-align: center;
  margin: 10px 0;
}

.statistic-title {
  font-size: 14px;
  color: #606266;
  margin-bottom: 5px;
}

.statistic-value {
  font-size: 20px;
  font-weight: bold;
  color: #303133;
}

.progress-section {
  margin: 20px 0;
}

.progress-item {
  margin-bottom: 15px;
}

.progress-label {
  font-size: 14px;
  color: #606266;
  margin-bottom: 5px;
}

.system-stats {
  margin-bottom: 15px;
}

.system-info-card {
  height: 100%;
}

.action-card {
  height: 100%;
}

.additional-info {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #ebeef5;
}
.quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.quick-actions .el-button {
  margin: 5px;
}
</style>

